<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/site/kpi.js"></script>
<script type="text/javascript">

$(function(){
	
	var gcolors = ["#FFB6C1","#DC143C","#CCAAFF","#ABCDEF"];
	var monthLabel = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
	var quarterLable = ['1季度','2季度','3季度','4季度'];
	ajaxPersonal("mp",gcolors,monthLabel,12);
	ajaxGroup("mg",gcolors,monthLabel,12);
	ajaxPersonal("qp",gcolors,quarterLable,4);
	ajaxGroup("qg",gcolors,quarterLable,4);

	
	
});


function ajaxPersonal(type,gcolors,lables,len) {
	//获取月度个人
	$.ajax({
	    url: "${pageContext.request.contextPath}/kpi/getKPIJSON/"+type+".html",
	    method: 'GET',
	    dataType: 'json',
	    success: function(result){
	    	var keys = [];
	    	var datas = [];
	    	var colors = [];
	    	$('#'+ type +'TT').datagrid({
	    		data: result
	    	});
	    	
	    	var j = 0;
	    	$.each(result.rows,function(index,name){	
	    		if ($.inArray(name.ename, keys) == -1) {
	    			keys.push(name.ename);
	    			colors.push(gcolors[j]);
	        		j++;
	    		}

	    	});

	    	for (var  i = 1 ; i <= len;i++) {
	    		var temp = [];
	    		for(var j = 0 ; j< keys.length; j ++) {	
	    			$.each(result.rows,function(index,name){	
	    				if(i == name.createTime && keys[j] == name.ename) {
	    					temp[j] = name.money;
	    				}
	    			});
	    			if (temp.length < keys.length) {
	    				temp.push(0);
	    			}	
	    		}
	    		datas.push(temp);
	    	}
	    	
	    	
	    	   new RGraph.Bar(type+'cvs', datas)
	          .Set('labels', lables )
	          .Set('key', keys)
	          .Set('colors',colors)
	          .Set('key.position', 'gutter')
	           .Set('gutter.left', 55)
	          .Draw();
	    }
	});
}




function ajaxGroup(type,gcolors	,lables,len) {
	//获取月度个人
	$.ajax({
	    url: "${pageContext.request.contextPath}/kpi/getKPIJSON/"+type+".html",
	    method: 'GET',
	    dataType: 'json',
	    success: function(result){
	    	var keys = [];
	    	var datas = [];
	    	var colors = [];
	    	$('#'+ type +'TT').datagrid({
	    		data: result
	    	});
	    	
	    	var j = 0;
	    	$.each(result.rows,function(index,name){	
	    		if ($.inArray(name.groupName, keys) == -1) {
	    			keys.push(name.groupName);
	    			colors.push(gcolors[j]);
	        		j++;
	    		}

	    	});

	    	for (var  i = 1 ; i <= len;i++) {
	    		var temp = [];
	    		for(var j = 0 ; j< keys.length; j ++) {	
	    			$.each(result.rows,function(index,name){	
	    				if(i == name.createTime && keys[j] == name.groupName) {
	    					temp[j] = name.money;
	    				}
	    			});
	    			if (temp.length < keys.length) {
	    				temp.push(0);
	    			}	
	    		}
	    		datas.push(temp);
	    	}
	    	
	    	   new RGraph.Bar(type+'cvs', datas)
	          .Set('labels', lables )
	          .Set('key', keys)
	          .Set('colors',colors)
	          .Set('key.position', 'gutter')
	           .Set('gutter.left', 55)
	          .Draw();
	    }
	});
}




</script>
 <div id="kpiMain" class="easyui-tabs" style="width:auto;height:200px" >
		<div title="月度业绩" style="padding:10px" data-options="href:'kpi/month.html',border:false,closed:true">
		
		</div>	
		<div title="季度业绩" style="padding:10px" data-options="href:'kpi/quarter.html',border:false,closed:true">
		</div>
</div>

 <div id="showkip" class="easyui-tabs" style="width:auto;height:450px" >
		<div id="mp" title="月度个人" >	
		<table id="mpTT" class="easyui-datagrid" style="width:auto;height:120px;"
				singleSelect="true"
				fitColumns="true"
				>
		    <thead>
			    <tr>
			    <th data-options="field:'ename',width:100">姓名</th>
			    <th data-options="field:'money',width:100">业绩（万元）</th>
			    <th data-options="field:'createTime',width:100">月份</th>
			    </tr>
		    </thead>
		</table> 			
		<canvas id="mpcvs" width="1000" height="400">[No canvas support]</canvas>														 			
	</div>
		<div id="mg" title="月度团队" >			
		<table id="mgTT" class="easyui-datagrid" style="width:auto;height:auto；"
				singleSelect="true"
				fitColumns="true"
				>
		    <thead>
			    <tr>
			    <th data-options="field:'groupName',width:100">组名</th>
			    <th data-options="field:'money',width:100">业绩（万元）</th>
			    <th data-options="field:'createTime',width:100">月份</th>
			    </tr>
		    </thead>
		</table> 	
		<canvas id="mgcvs" width="1000" height="400">[No canvas support]</canvas>														 			
	</div>							
	 <div id="qp" title="季度个人" >		
		<table id="qpTT" class="easyui-datagrid" style="width:auto;height:auto"
				url="${pageContext.request.contextPath}/kpi/getKPIJSON/qp.html"
				singleSelect="true"
				fitColumns="true"
				>
		    <thead>
			    <tr>
			    <th data-options="field:'ename',width:100">姓名</th>
			    <th data-options="field:'money',width:100">业绩（万元）</th>
			    <th data-options="field:'createTime',width:100">季度</th>
			    </tr>
		    </thead>
		</table> 	
		<canvas id="qpcvs" width="1000" height="400">[No canvas support]</canvas>								 	
	</div>	
		<div id="qg" title="季度团队" >	
		<table id="qgTT" class="easyui-datagrid" style="width:auto;height:auto；"
				url="${pageContext.request.contextPath}/kpi/getKPIJSON/qg.html"
				singleSelect="true"
				fitColumns="true"
				>
		    <thead>
			    <tr>
			    <th data-options="field:'groupName',width:100">组名</th>
			    <th data-options="field:'money',width:100">业绩（万元）</th>
			      <th data-options="field:'createTime',width:100">季度</th>
			    </tr>
		    </thead>
		</table>  	
		<canvas id="qgcvs" width="1000" height="400">[No canvas support]</canvas>														 			
	</div>									 	
</div>